<template>
  <div class="product-wrapper">
    <div class="product-box">
      <div class="product-header">
        <h4 class="title">商品推荐</h4>
        <el-link
          class="more-link"
          :href="module.props.moreUrl || '#/more-products'"
          target="_blank"
          type="primary"
        >
          更多 <i class="el-icon-arrow-right"></i>
        </el-link>
      </div>

        <el-row :gutter="12">
          <el-col
            v-for="(product, index) in module.props.products"
            :key="index"
            :span="parseInt(module.props.productTypesetting) || 12"
          >
            <el-card
              :body-style="{ padding: '10px' }"
              shadow="hover"
              class="product-card"
            >
              <img :src="product.image" alt="product.name" class="product-img" />
              <div class="product-name">{{ product.name }}</div>
              <div class="product-price">¥{{ product.price }}</div>
            </el-card>
          </el-col>
        </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductModule",
  props: ["module"],
};
</script>

<style scoped>
.product-wrapper {
  background-color: rgb(242, 246, 252);
  padding: 12px;
  box-sizing: border-box;
}

.product-box {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.more-link {
  font-size: 13px;
}

.product-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 6px;
}

.product-name {
  font-size: 14px;
  margin: 4px 0;
  color: #333;
}

.product-price {
  font-size: 14px;
  color: #f56c6c;
}
</style>
